<template>
	<view>
		<view class="report fbox fbox-start fbox-jbetween">
			<view>
				<image src="/static/information/Warning.png" mode="widthFix"></image>
			</view>
			<view class="fbox fbox-acenter fbox-jbetween">
				<view class="err f24 ellipsis3">
					<text class="color3">{{ $t('information.Notes') }}: </text>{{ $t('information.represent') }}
				</view>
				<view class="btn colorwhite tc" @click="goreport">
					{{ $t('information.Report') }}
				</view>
			</view>
		</view>
		<view class="Report-box" v-if="show" :catchtouchmove="true">
			<view class="Report">
				<view class="content bg-white">
					<view class="big-title tc font-w f30 color3">
						{{ $t('information.Complain') }}
					</view>
					<view class="jubao-item">
						<view class="title font-w f24 color3">
							{{ $t('information.Select') }}:
						</view>
						<view class="cont">
							<view class="cont-item fbox fbox-acenter fbox-jbetween" v-for="(item,index) in reportlist"
								:key="index">
								<view class="">
									<text class="text">{{item.name}}</text>
								</view>
								<view class="">
									<u-checkbox-group placement="column" @change="groupChange">
										<u-checkbox shape="circle" :checked="item.check" :key="index" :name="item.name">
										</u-checkbox>
									</u-checkbox-group>
								</view>
							</view>
						</view>
					</view>
					<view class="jubao-item">
						<view class="title font-w f24 color3">
							{{ $t('information.Additional') }}:
						</view>
						<view class="input-box">
							<input type="text" v-model="value" maxlength="50" placeholder-class="tr f26" />
							<view class="value">
								{{value.length+'/50'}}
							</view>
						</view>

					</view>
					<view class="jubao-item">
						<view class="title font-w f24 color3">
							{{ $t('information.Upload') }}
						</view>
						<view class="img">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="10" maxCount="3"></u-upload>
						</view>
					</view>

					<view class="choose fbox fbox-start">
						<view class="choose-yi">
							<u-checkbox-group>
								<u-checkbox v-model="checkboxValue" @change="checkboxclickValue" shape="circle">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="choose-er">
							{{ $t('information.Acknowledged') }} <text v-on:click.stop="goTerms('applet_agreement_reprot')">{{ $t('information.tc') }}
							</text>{{ $t('information.proceed') }}
						</view>
					</view>
					<view class="" style="margin-top: 40rpx;">
						<u-button style="width: 80%; height: 80rpx;" disabled size="large" shape="circle" :text="this.$t('information.SUBMIT')"
							v-if="checkboxValue == false"></u-button>
						<u-button style="width: 80% ; height: 80rpx;" @click="gopush()" size="large" type="primary" shape="circle"
							:text="this.$t('information.SUBMIT')" v-else>
						</u-button>
					</view>
				</view>
				<u-icon @click="close" name="close-circle" class="cha" color="#ffffff" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "report",
		data() {
			return {
				show: false,
				reportlist: [{
					name: this.$t('information.Fake'),
					check: true
				}, {
					name: this.$t('information.Religionary'),
					check: false
				}, {
					name: this.$t('information.Inappropriate'),
					check: false
				}, {
					name: this.$t('information.lllegal'),
					check: false
				}],
				fileList1: [],
				type: this.$t('information.Fake'),
				value: "",
				checkboxValue: false
			};
		},
		props: {
			id: {
				type: String,
				default:''
			},
		},
		methods: {
			gopush(){
				console.log(this.type)
				if(this.type == ''){
					uni.showToast({
						title:"请选择举报类型",
						icon:"none"
					})
					return
				}
				uni.showLoading({
					mask:true
				})
				let imgarr = []
				this.fileList1.map(item=>{
					imgarr.push(item.url)
				})
				const params = {
					map: 'applet_city_report',
					category:this.type,
					content:this.value,
					pid:this.id,
					images:imgarr
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title:res.data.data.msg,
							icon:"none"
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							title:res.data.em,
							icon:"none"
						})
					}
				})
				
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://dongya.hualin688.com/applet.php', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							map:"applet_img_upload"
						},
						success: (res) => {
							setTimeout(() => {
								let res1 = JSON.parse(res.data)
								resolve("https://dongya.hualin688.com"+ res1.data.path)
							}, 1000)
						}
					});
				})
			},
			checkboxclickValue(e) {
				console.log(e)
				this.checkboxValue = e
			},
			goTerms(map) {
				uni.navigateTo({
					url: '/pages/Agreement/Agreement?map=' + map
				})
			},
			goreport() {
				this.show = true
			},
			close() {
				this.show = false
			},
			groupChange(n) {
				this.reportlist.forEach((item, index) => {
					if (item.name == n[0]) {
						item.check = true
					} else {
						item.check = false
					}
				})
				this.type = n[0] || ''
			},
		}
	}
</script>

<style lang="less">
	.report {
		background-color: #f4f5f6;
		padding: 30rpx 20rpx;

		image {
			width: 70rpx;
		}

		.err {
			width: 70%;
			color: #6f6f6f;
		}

		.btn {
			width: 21%;
			background-color: #ff4e31;
			padding: 6rpx 10rpx;
			border-radius: 40rpx;
		}
	}

	.Report-box {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: rgba(0, 0, 0, .4);
		padding-top: 10%;

		.Report {
			width: 80%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.content {
				border-radius: 20rpx;
				padding: 30rpx;
			}

			.jubao-item {
				margin-top: 20rpx;

				.title {
					margin: 20rpx 0;
				}

				.cont {
					.cont-item {
						margin-top: 20rpx;
						border: 1px solid #e4e3e4;
						border-radius: 20rpx;
						padding: 20rpx;

						.text {
							font-size: 24rpx;
							color: #6f6f6f;
							border-radius: 20rpx;
						}
					}
				}

				.input-box {
					border: 1px solid #e4e3e4;
					padding: 10rpx;
					border-radius: 20rpx;
					position: relative;

					.value {
						font-size: 24rpx;
						color: #999;
						position: absolute;
						right: 20rpx;
						top: 18rpx;
					}

					input {
						padding-right: 100rpx;
					}
				}

				.img {
					image {
						width: 100rpx;
					}
				}
			}

			.choose {
				margin-top: 30rpx;

				.choose-yi {
					width: 10%;

				}

				.choose-er {
					width: 90%;
					font-size: 24rpx;
					color: #6f6f6f;

					text {
						color: #4ca5e8;
					}
				}
			}

			.cha {
				width: 50rpx;
				margin: 30rpx auto;
				display: block;
				z-index: 99999;
			}
		}
	}
</style>
